<template>
	<div id="userapplylist" class="userapplylist same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
						<el-breadcrumb-item>普通水卡</el-breadcrumb-item>
						<el-breadcrumb-item>水卡开卡记录</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
				</div>
			</div>
			<div class="same-search-box">
				<div class="same-search-left">
					<div class="same-left-one">
						<span class="same-search-span">卡号:</span>
						<el-input size="medium" type="text" placeholder="请输入卡号" style="width: 160px;" v-model="virtualCard">
						</el-input>
					</div>
					<div class="same-left-one">
						<el-button type="primary" size="medium" @click="serachfun()">搜索</el-button>
						<el-button type="info" size="medium" @click="reset()">重置</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="same-table-box">
			<div class="user-apply-title-row">
				<h4 class="same-title-box">开卡记录</h4>
				<div class="user-apply-title-btns">
					<a href="./static/user_card.xlsx" type="primary" size="medium" round>下载模板</a>
					<el-upload ref="upload" action="Partner/WaterCard/waterCardExcel" :on-preview="handlePreview"
					:on-remove="handleRemove" :file-list="fileList" :headers="uploadToken" :on-success="upSuccess"
					:auto-upload="false">
					<el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
					<el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">上传到服务器
					</el-button>
				</el-upload>
				</div>
			</div>
		
			<div class="table_box">

				<div class="common-table-outer">
					<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
						:data="tableData" stripe>
						<el-table-column header-align="center" width="50" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*pageSize}}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="apply_time" label="申请时间">
						</el-table-column>
						<el-table-column align="center" label="用户">
							<template slot-scope="scope">
								{{ scope.row.full_name || '——' }}
							</template>
						</el-table-column>
						<el-table-column align="center" label="手机号码">
							<template slot-scope="scope">
								{{ scope.row.tel || '——' }}
							</template>
						</el-table-column>
						<el-table-column align="center" label="水卡号">
							<template slot-scope="scope">
								{{ scope.row.card_number || '——' }}
							</template>
						</el-table-column>

						<el-table-column align="center" prop="audit_status" label="办理状态">
						</el-table-column>

						<el-table-column align="center" label="余额">
							<template slot-scope="scope">
								{{ scope.row.recharge_money | filterNumber }}
							</template>
						</el-table-column>

						<el-table-column align="center" show-overflow-tooltip label="所属园区">
							<template slot-scope="scope">
								{{ scope.row.village_name || '——' }}
							</template>
						</el-table-column>

						<el-table-column align="center" label="详细地址">
							<template slot-scope="scope" show-overflow-tooltip>
								{{ scope.row.address || '——' }}
							</template>
						</el-table-column>


						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>

					<div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
						<el-pagination background class="pull-right clearfix" @size-change="handleSizeChange"
							@current-change="handleCurrentChange" :current-page.sync="pageNo" :page-sizes="pageSizesList"
							:page-size="pageSize" layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'userapplylist',
		data: function () {
			return {
				pageNo: 1,
				pageSize: 15,
				pageSizesList: [15, 30, 40, 50],
				tableData: [], // 返回的结果集合
				totalDataNumber: 0, // 数据的总数,---------
				time: '',
				loading: true,
				value: '',
				virtualCard: '', //申请卡号
				uploadToken: {},
				fileList: [],
				isLoad: false //是否请求接口
			};
		},
		// 初始化执行方法
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
			var that = this;
			var pageSize = that.pageSize; // 每页显示条数
			var page = that.pageNo; // 当前页
			that.waterCardList(page, pageSize); // 获取电子卡列表
			this.uploadToken = { token: locache.get('token') };
		},
		inject: ['reload'],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			// 三级联动
			handleChange(value) { },
			//点击修改
			changeapply(index) {
				this.$router.push({ path: '/editaudit', query: { id: index } });
			},
			//分页
			handleSizeChange(val) {
				var that = this;
				that.pageNo = 1;
				that.pageSize = val; // 当前每页显示条数
				that.waterCardList(that.pageNo, val); // 获取电子卡列表
			},
			// 当前页
			handleCurrentChange(val) {
				var that = this;
				that.pageNo = val;
				that.waterCardList(val, that.pageSize); // 获取电子卡列表
			},
			reset() {
				this.pageNo = 1;
				this.virtualCard = '';
				this.waterCardList(this.pageNo, this.pageSize);
			},
			// 搜索
			serachfun: function () {
				this.pageNo = 1;
				this.waterCardList(1, this.pageSize);
			},

			// 获取用户申请卡列表
			waterCardList: function (page, pageSize, card = '') {
				var that = this;
				var virtualCard = that.virtualCard; //实体卡号
				that.loading = true; // 开启动画
				that.isLoad = false;
				that.$post({
					url: 'Partner/WaterCard/waterCardAuditList',
					data: { row: pageSize, page: page, card: virtualCard, source_type: 2 },
					success: data => {
						that.tableData = []; // 清空数据
						that.isLoad = true;
						that.loading = false; //关闭动画
						if (data.code == 1000) {
							that.tableData = data.data.data;
							that.totalDataNumber = Number(data.data.page.total_number); // 总的数据
						} else {
							this.$message({
								type: 'error',
								showClose: true,
								message: data.message,
								center: true
							});
						}
					}
				});
			},
			upSuccess(response, file, fileList) {
				console.log(response, file, fileList);
				if (response.code == 1000) {
					this.$message({
						message: response.message,
						type: 'success'
					});
				} else {
					this.$message.error(response.message);
				}
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			}
		},
		mounted() { },
		watch: {}
	};
</script>
<style>
	#userapplylist {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
	}
</style>
<style scoped>
	.user-apply-title-row{
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		align-items: center;
	}

	.user-apply-title-btns{
		display: flex;
		align-items: center;
	}

	.user-apply-title-btns a{
		display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    border: 1px solid #DCDFE6;
   
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
		border-radius: 4px;
		color: #FFF;
    background-color: #2C5586;
		border-color: #2C5586;
		padding: 10px 20px;
    font-size: 14px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.user-apply-title-btns a:hover{
		opacity: 0.8;
	}
</style>